<template>
  <div class="page-wrapper">
    <!-- 头部导航 -->
    <div class="header-wrapper">
      <h2 class="top">
        <van-icon class="back-icon" @click="fanhui" name="arrow-left" size="30px" />
        <span class="title-text">服务包详情</span>
      </h2>
    </div>
    <!-- 图片 -->
    <img src="http://srhtngjmu.hn-bkt.clouddn.com/wanmai/%E6%9C%8D%E5%8A%A1%E5%8C%85%E8%AF%A6%E6%83%85%E5%9B%BE%E7%89%87.jpg" alt="">
    <!-- 服务包基本信息 -->
    <div class="dahezi">
      <div class="xiao-y">
        <span class="mingcheng">{{servicePackage.packageName}}</span>
        <span class="jiage">￥{{servicePackage.price}}</span>
      </div>
      <div class="suoshujigo">
        <span class="jiage111">所属机构：{{medicalInstitution.institutionName}}</span><br><br>
        <span class="jiage111">所属团队：{{doctorTeam.teamName}}</span><br>
      </div>
      <div class="anniu">
        <button class="but1">慢病管理</button>
        <button class="but2">中医服务</button>
        <button class="but3">老年人管理</button>
      </div>
    </div>
    <!-- 服务包详细信息 -->
    <div class="xaimainhezi">
      <h3 style="margin-left: 10px;margin-top: 10px;">服务对象</h3>
      <div class="tu-pian1111">
        <span class="jiage111">{{servicePackage.targetPopulation}}</span>
      </div>
      <h3 style="margin-left: 10px;margin-top: 10px;">服务介绍</h3>
      <div class="tu-pian111" style="padding: 10px;width: 90%;height: 90px;">
        <span class="jiage111" >{{servicePackage.serviceIntroduction}}</span>
      </div>
      <h3 style="margin-left: 10px;margin-top: 10px;">服务项目</h3>
      <!-- 使用 v-for 指令循环渲染服务项目 -->
      <div class="diangmu" v-for="(item, index) in servicePackageItems" :key="index">
        <span class="mingcheng1">{{ item.itemName }}</span>
        <span class="jiage1111">{{ item.remainingTimes }}次</span>
      </div>
      <h3 style="margin-left: 10px;margin-top: 10px;">服务周期</h3>
      <span class="jiage111">一年（1年）</span>
      <div style="width: 100%;height: 100px" >

      </div>
    </div>
    <!-- 加载提示 -->
    <div v-if="isLoading" class="loading">
      数据加载中，请稍候...
    </div>
    <!-- 错误提示 -->
    <div v-if="errorMessage" class="error">
      {{ errorMessage }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';

// 定义常量
const API_URL = 'http://localhost:10086/api/service/service_package/findServicePackageDetailById/';
const SUCCESS_CODE = 200;

export default {
  data() {
    return {
      isLoading: true, // 数据加载状态
      id: null, // 用于存储接收到的服务包 id
      servicePackage: {}, // 存储获取到的服务包信息
      doctorTeam: {}, // 设置默认值
      medicalInstitution: {}, // 设置默认值
      servicePackageItems: [],
      errorMessage: '' // 错误信息
    };
  },
  methods: {
    async findAll() {
      this.isLoading = true; // 开始加载数据
      this.errorMessage = ''; // 清空错误信息

      try {
        const res = await axios.get(`${API_URL}${this.id}`);
        console.log('完整的响应数据:', res.data.data);
          this.doctorTeam = res.data.data.doctorTeam || {};
          this.medicalInstitution = res.data.data.medicalInstitution || {};
          this.servicePackage = res.data.data.servicePackage || {};
          this.servicePackageItems = res.data.data.servicePackageItems || [];
          console.log('服务包数据:', this.servicePackage)

      } catch (error) {
        console.error('请求出错:', error);
        this.errorMessage = '网络请求出错，请检查网络或服务器状态';
        this.$message.error(this.errorMessage);
      } finally {
        this.isLoading = false; // 数据加载完成
      }
    },
    // 返回上一页
    fanhui() {
      //返回上一级
      this.$router.go(-1);
    }
  },
  created() {
    const token = JSON.parse(localStorage.getItem("token"));
    if (!token) {
      this.$message.error('请先登录');
      setTimeout(() => {
        this.$router.push({ name: 'login' });
      }, 1000);
    }
    // 设置全局默认请求头
    axios.defaults.headers.common['token'] = token;

    // 获取传递的服务包 id
    this.id = this.$route.query.servicePackageId;

    // 根据获取到的 id 去请求服务包数据
    this.findAll();
  }
};
</script>

<style scoped>
/* 样式部分保持不变 */
.loading {
  text-align: center;
  padding: 20px;
  font-size: 16px;
  color: #999;
}

.error {
  text-align: center;
  padding: 20px;
  font-size: 16px;
  color: red;
}
</style>

<style scoped>
.mingcheng1{
  font-size: 16px;
  color: #333333;
  margin-left: 10px;
}
.jiage1111{
  font-size: 16px;
  color: #2984F8;
  float: right;
  margin-right: 20px;
}
.diangmu{
  margin-top: 20px;
  width: 90%;
  height: 30px;
  border-bottom: 1px solid #B2B2B2;
}
.xaimainhezi{
  width: 100%;
  margin-top: 15px;
  background-color: #FEFEFE;
  height: 500px;
  padding: 10px;
}
.jiage111{
  color: #B2B2B2;
  font-size: 16px;
  margin-left: 10px;
}
.dahezi{
  width: 100%;
  height: 190px;
  margin-top: -5px;
  background-color: #FEFEFE;
}
.jiage{
  font-size: 20px;
  color: #FA746B;
  font-weight: 500;
  float: right;
  margin-right: 20px;
}
.xiao-y{
  float: left;
  margin-top: 20px;
  width: 100%;
  height: 30px;
}
.mingcheng{
  font-size: 20px;
  color: black;
  font-weight: 500;
  margin-left: 10px;
}
.tu-pian1 img {
  width: 80px;
  height: 80px;
  border-radius: 20px;
}


.but1 {
  float: left;
  color: #44D6B5;
  width: 110px;
  height: 35px;
  margin-top: 20px;
  margin-left: 10px;
  border-radius: 8px;
  background-color: #D8F6ED;
  border: none;
}

.but2 {
  float: left;
  color: #717AF4;
  width: 110px;
  height: 35px;
  margin-top: 20px;
  margin-left: 10px;
  border-radius: 8px;
  background-color: #E2E4FD;
  border: none;
}

.but3 {
  float: left;
  color: #FA898E;
  width: 110px;
  height: 35px;
  margin-top: 20px;
  margin-left: 10px;
  border-radius: 8px;
  background-color: #FEE3E1;
  border: none;
}

.anniu {
  width: 100%;
  height: 80px;
  float: left;
}

.ping-fen {
  margin-left: 10px;
  color: #FFCD1A;
  font-size: 18px;
}

.jigo {
  color: dimgrey;
}

.tuan-dui-text {
  width: 200px;
  height: 100px;
  float: left;
  margin-left: 10px;
  margin-top: 40px;
}

.tuan-dui-text-title {
  font-size: 20px;
  color: black;
}

.tu-pian img {
  width: 150px;
  height: 150px;
  float: left;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 128, 255, 0.2);
}

.page-wrapper {
  min-height: 100vh;
  background-color: #F5F9FD;
}

.header-wrapper {
  background-color: white;
}

.top {
  display: flex;
  align-items: center;
  height: 50px;
  position: relative;
}

.back-icon {
  position: absolute;
  left: 10px;
}

.title-text {
  width: 100%;
  text-align: center;
}

img {
  /*background-color: red;*/
  width: 100%;
  height: 300px;
  margin-top: -20px;
}

</style>